<template>
  <div class="body-login">

    <div class="avatar">
      <el-avatar :src='user_pic' icon="el-icon-user-solid" v-model="user_pic" :size="70"></el-avatar>
    </div>

    <div class="userinfo">
      <label for="username" class="label">账号
        <el-input placeholder="请输入内容" v-model="username" clearable class="userinfo-el-input" :value="username"></el-input>
      </label>

      <label for="password" class="label">密码
        <el-input placeholder="请输入密码" v-model="password" show-password class="userinfo-el-input"></el-input>
      </label>

      <div class="userinfo-checkcode-box">
        <label for="password" style="font-size: 15px;">验证码
          <el-input placeholder="请输入验证码" v-model="code" clearable></el-input>
          <img :src=checkSrc alt="图片未加载，请刷新页面重试" @click="refresh" class="userinfo-checkImg-box">
        </label>
      </div>
    </div>
      <el-button type="primary" @click ="clickButton" class="userinfo-el-button" style="position: absolute;top: 340px;right: 350px;">登录</el-button>

  </div>
</template>

<script>
export default {
  props:{
        userAccount: String
  },

  data () {
    return {
      username : '',
      password : '',
      user_pic : '',
      code : '',
      checkSrc : '',
    }
  },

  methods: {

    async login () {
      const res = await this.$http.post('/user/userLogin',{
          userAccount : this.username,
          password : this.password,
      },)
      if(res.data.status === 0){
        this.$cookies.set( "token" ,res.data.token, 1)
        this.$message({
          message: '登录成功，欢迎回来 亲爱的用户'+res.data.username,
          type: 'success'
        });
      }
      else{
        this.$message.error('用户名或密码错误，请重新检查输入信息是否正确')
      }
    },

    async checkCode(){
      const res = await this.$http.post('/user/loginCodeCheck')
      this.checkSrc= `data:image/svg+xml;base64,${window.btoa(res.data )}`;
    },

    async refresh(){
      const resFresh = await this.$http.post('/user/refreshCode')
      this.checkSrc= `data:image/svg+xml;base64,${window.btoa(resFresh.data )}`;
    },

    async clickButton(){
      const res = await this.$http.post('/user/checkCodeLogin',{
        code : this.code,
      })

      if(res.data.status === 0)
        this.login()
      else if(res.data.status === 1){
        this.refresh()
        this.$message({
          message: '验证码错误！请重新输入',
        })
        this.code = ''
        return
      }

      if(this.username === 'Admin' && this.password === 'Admin'){
        this.$router.push('/AdminPage')
        return 0
      }

      const res2 = await this.$http.post('/user/userLogin',{
        userAccount : this.username,
        password : this.password,
      })

      if(res2.data.status === 0){
        const token = res2.data.token
        window.sessionStorage.setItem('token', token)
        window.sessionStorage.setItem('userAccount', this.username)

        this.$router.push('/UserPage')
      }else{
        this.$message({
          message: '账号或密码错误！请重新输入',
        })
      }
    }
  },

  watch: {
    async username(newVal){      
       const res = await this.$http.post('/user/queryUserPic',{
          userAccount : newVal,
      },)

      if(res.data.status===0){
        this.user_pic = res.data.data
      }
      else
        this.user_pic = ''
    }
  },

  created: function () {
    this.username = this.userAccount
    this.checkCode();
  }
}
</script>

<style lang="less">
  .body-login{
    padding: 30px; 
    min-width: 800px;
    min-height: 500px;   

    width: 800px;
    height: 500px;
    background-color: white;
    opacity: 1;
    border: 3px gray solid;

    border-radius:50px;
    box-shadow: 60px 60px 0px white;

    position: absolute;
    top: 10%;
    left: 25%;
  }
  .avatar{
    margin-left: 45%;
  }
  .userinfo{
    width: 400px;
    margin-left: 25%;
    margin-top: 0%;
  }
  .label{
    font-size: 25px;
  }
  .userinfo-el-input{
    margin-bottom: 30px;
    margin-top: 10px;
  }
  .userinfo-el-button{
    height: 40px;
    width: 200px;
    margin-left: 30%!important;
    margin-top:10%!important;
  }
  .userinfo-checkcode-box{
    width: 150px;
  }

  .userinfo-checkImg-box{
    margin-top: -80px;
    margin-left: 250px;
    border: 1px solid black;
  }
</style>